<template>
  <el-form size="small" :inline="true" label-width="88px" id="viewForm">
    <draggable
      chosenClass="chosen"
      forceFallback="true"
      animation="200"
      @start="drag = true"
      @end="drag = false"
      @update="handleOrder" >
      <transition-group >

        <div  v-for="filterItem in list" :key="filterItem.key" :id="filterItem.key" :class="itemClick === filterItem.key?'formItemClick':'formItem'" v-on:click="formItemClick($event,filterItem.key)">
          <el-form-item  :label-width="filterItem.labelWidth + 'px'" :label="filterItem.label">
            <template>
              <el-popover
                placement="bottom-end"
                width="300"
                trigger="manual"
                v-model="filterItem.key===itemClick">
                <div class="widthConfig">
                  <span>文字宽度：</span>
                  <div class="block">
                    <el-slider
                      v-model="filterItem.labelWidth"
                      :min="40"
                      :max="400"
                      show-input @change="listChange">
                    </el-slider>
                  </div>
                </div>
                <div class="widthConfig">
                  <span>元素宽度：</span>
                  <div class="block">
                    <el-slider
                      v-model="filterItem.formItemWidth"
                      :min="40"
                      :max="400"
                      show-input @change="listChange">
                    </el-slider>
                  </div>
                </div>


                <el-input slot="reference" v-if="filterItem.type === 'input'|| filterItem.type === 'number_range'" :style="'width:'+ (filterItem.formItemWidth) +'px'"></el-input>
                <el-select slot="reference" v-if="filterItem.type === 'select' || filterItem.type === 'checkbox'|| filterItem.type === 'radio'"
                           multiple placeholder="请选择" v-model="filterForm[filterItem.key]" :style="'width:'+ (filterItem.formItemWidth) +'px'">
                  <el-option v-for="element in filterItem.select" :label="element.label" :value="element.value" ></el-option>
                </el-select>
                <!--日期-->
                <template class="block" v-if="filterItem.type === 'date'" slot="reference">
                  <el-date-picker
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="dateOptions" :style="'width:'+ (filterItem.formItemWidth) +'px'">
                  </el-date-picker>
                </template>
                <!--日期范围-->
                <template class="block" v-if="filterItem.type === 'date_range'" slot="reference" >
                  <el-date-picker
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions" :style="'width:'+ (filterItem.formItemWidth) +'px'">
                  </el-date-picker>
                </template>
              </el-popover>
              <i class="el-tag__close el-icon-close" @click="delConfigField(filterItem.key)"></i>
            </template>
          </el-form-item>
        </div>
      </transition-group>
    </draggable>
  </el-form>
</template>

<script>
import { delGridConfig } from "@/api/form/modelfield";
import draggable from 'vuedraggable'
export default {
  components:{
    draggable,
  },
  mounted() {
    this.list = this.filterCreateList;
    document.addEventListener("click", (e)=>{
      if (e.target.localName !== 'label'){
        this.itemClick ="";
      }
    });
  },
  props: {
    filterCreateList: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      list: [],
      drag: false,
      filterForm:{

      },
      itemClick: '',
      dateOptions:{
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },

  methods: {
    delConfigField(id){
      let cThis=this;
      this.$modal.confirm('是否确认删除属性配置？').then(function() {
        return delGridConfig(id);
      }).then(() => {
        cThis.$modal.msgSuccess("删除成功");
        this.$emit("gridReloadNoId");
      }).catch(() => {});
    },
    updateList(list){
      this.list = list;
    },
    listChange(){
      this.$emit('change', {
        list: this.list
      });
    },
    handleOrder(evt) {
      let oldIndex = evt.oldIndex;
      let newIndex = evt.newIndex;
      let l = [];
      this.filterCreateList.forEach((f,i)=>{
        if (i === oldIndex){
          l.push(this.filterCreateList[newIndex]);
        } else if (i === newIndex){
          l.push(this.filterCreateList[oldIndex]);
        } else{
          l.push(f);
        }
      });
      this.$emit('change', {
        list: l
      });
    },
    // 表单项点击
    formItemClick(e,key){
      if (e.target.localName === 'label'){
        if (this.itemClick === key) {
          this.itemClick = "";
        } else{
          this.itemClick = key;
        }
      }

    }
  },
};
</script>
<style lang="scss" scoped>
.sortable-ghost {
  color: white;
  background-color: #409EFF!important;
}
.formItem{
  display: inline-block;
  border: 1px dashed transparent;
}
.formItemClick{
  border: 1px dashed #409EFF;
  display: inline-block;
}
/*.el-form-item--small.el-form-item {
  margin-bottom: 9px!important;
  margin-top: 9px!important;
}*/
.labelSpan{
  font-weight: 700;
}
.el-icon-close {
  border-radius: 50%;
  text-align: center;
  position: relative;
  cursor: pointer;
  font-size: 16px;
  height: 16px;
  width: 16px;
  line-height: 16px;
  vertical-align: middle;
  right: -5px;
  /* box-sizing: inherit;*/
  /*   border: 1px solid #909399;*/
  float:right;

  display: inline-block!important;
}

.el-tag--info .el-tag__close {
  color: #909399;
}

.el-icon-close:hover {
  background-color: #909399; /* 鼠标悬停时的背景色 */
}


</style>
